<template>
	<div class="swiper-box">
		<div class="nav-menu">
			<ul class="menu-wrap">
				<li class="menu-item">
					<a href="javascript:;">手机 电话卡</a>
					<div class="children">
						<ul v-for="item,index in menuList" :key="index">
							<li v-for="sub in item">
								<a :href="sub?'/#/product/'+sub.id:''"><img :src="sub.img" alt="">
								<span>{{sub.name}}</span></a>
							</li>
						</ul>
					</div>
				</li>
				<li class="menu-item">
					<a href="javascript:;">电视 盒子</a>
					<div class="children">
						<ul v-for="item,index in menuList" :key="index">
							<li v-for="sub in item">
								<a :href="sub?'/#/product/'+sub.id:''"><img :src="sub.img" alt="">
								<span>{{sub.name}}</span></a>
							</li>
						</ul>
					</div>
				</li>
				<li class="menu-item">
					<a href="javascript:;">笔记本 平板</a>
					<div class="children">
						<ul v-for="item,index in menuList" :key="index">
							<li v-for="sub in item">
								<a :href="sub?'/#/product/'+sub.id:''"><img :src="sub.img" alt="">
								<span>{{sub.name}}</span></a>
							</li>
						</ul>
					</div>
				</li>
				<li class="menu-item">
					<a href="javascript:;">家电 插线板</a>
					<div class="children">
						<ul v-for="item,index in menuList" :key="index">
							<li v-for="sub in item">
								<a :href="sub?'/#/product/'+sub.id:''"><img :src="sub.img" alt="">
								<span>{{sub.name}}</span></a>
							</li>
						</ul>
					</div>
				</li>
				<li class="menu-item">
					<a href="javascript:;">出行 穿戴</a>
					<div class="children">
						<ul v-for="item,index in menuList" :key="index">
							<li v-for="sub in item">
								<a :href="sub?'/#/product/'+sub.id:''"><img :src="sub.img" alt="">
								<span>{{sub.name}}</span></a>
							</li>
						</ul>
					</div>
				</li>
				<li class="menu-item">
					<a href="javascript:;">智能 路由器</a>
					<div class="children">
						<ul v-for="item,index in menuList" :key="index">
							<li v-for="sub in item">
								<a :href="sub?'/#/product/'+sub.id:''"><img :src="sub.img" alt="">
								<span>{{sub.name}}</span></a>
							</li>
						</ul>
					</div>
				</li>
				<li class="menu-item">
					<a href="javascript:;">电源 配件</a>
					<div class="children">
						<ul v-for="item,index in menuList" :key="index">
							<li v-for="sub in item">
								<a :href="sub?'/#/product/'+sub.id:''"><img :src="sub.img" alt="">
								<span>{{sub.name}}</span></a>
							</li>
						</ul>
					</div>
				</li>
				<li class="menu-item">
					<a href="javascript:;">生活 箱包</a>
					<div class="children">
						<ul v-for="item,index in menuList" :key="index">
							<li v-for="sub in item">
								<a :href="sub?'/#/product/'+sub.id:''"><img :src="sub.img" alt="">
								<span>{{sub.name}}</span></a>
							</li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
		<swiper ref="mySwiper" :options="swiperOptions">
		    <swiper-slide v-for="item,index in slideList" :key="index">
					<a href=""><img :src="item.img" alt=""></a>
				</swiper-slide>
		    <div class="swiper-pagination" slot="pagination"></div>
				<div class="swiper-button-prev" slot="button-prev"></div>
				<div class="swiper-button-next" slot="button-next"></div>
		  </swiper>
	</div>
</template>

<script>
	import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
	import 'swiper/css/swiper.css'
	export default{
		components:{
			Swiper,
			SwiperSlide
		},
		data() {
		      return {
		        swiperOptions: {
						 autoplay:true,
							loop:true,
							effect:"cube",
							 cubeEffect: {
							    slideShadows: true,
							    shadow: true,
							    shadowOffset: 100,
							    shadowScale: 0.6
							  },
								 navigation: {
								      nextEl: '.swiper-button-next',
								      prevEl: '.swiper-button-prev',
								    },
		          pagination: {
		            el: '.swiper-pagination',
								clickable:true
		          },
		          // Some Swiper option/callback...
		        },
						slideList:[
							{id:'42',img:'/imgs/slider/slide-1.jpg'},
							{id:'45',img:'/imgs/slider/slide-2.jpg'},
							{id:'46',img:'/imgs/slider/slide-3.jpg'},
							{id:'',img:'/imgs/slider/slide-4.jpg'},
							{id:'',img:'/imgs/slider/slide-5.jpg'}],
							menuList:[
								[{id:'30',img:'/imgs/item-box-1.png',name:'小米cc9'},
								{id:'31',img:'/imgs/item-box-2.png',name:'小米8'},
								{id:'32',img:'/imgs/item-box-3.jpg',name:'小米8青春吧'},
								{id:'33',img:'/imgs/item-box-4.jpg',name:'redMi K20pro'},],
								[{id:'30',img:'/imgs/item-box-1.png',name:'小米cc9'},
								{id:'31',img:'/imgs/item-box-2.png',name:'小米8'},
								{id:'32',img:'/imgs/item-box-3.jpg',name:'小米8青春吧'},
								{id:'33',img:'/imgs/item-box-4.jpg',name:'redMi K20pro'},],
								[{id:'30',img:'/imgs/item-box-1.png',name:'小米cc9'},
								{id:'31',img:'/imgs/item-box-2.png',name:'小米8'},
								{id:'32',img:'/imgs/item-box-3.jpg',name:'小米8青春吧'},
								{id:'33',img:'/imgs/item-box-4.jpg',name:'redMi K20pro'},],
								[{id:'30',img:'/imgs/item-box-1.png',name:'小米cc9'},
								{id:'31',img:'/imgs/item-box-2.png',name:'小米8'},
								{id:'32',img:'/imgs/item-box-3.jpg',name:'小米8青春吧'},
								{id:'33',img:'/imgs/item-box-4.jpg',name:'redMi K20pro'},],
								[{id:'30',img:'/imgs/item-box-1.png',name:'小米cc9'},
								{id:'31',img:'/imgs/item-box-2.png',name:'小米8'},
								{id:'32',img:'/imgs/item-box-3.jpg',name:'小米8青春吧'},
								{id:'33',img:'/imgs/item-box-4.jpg',name:'redMi K20pro'},],
								[{id:'30',img:'/imgs/item-box-1.png',name:'小米cc9'},
								{id:'31',img:'/imgs/item-box-2.png',name:'小米8'},
								{id:'32',img:'/imgs/item-box-3.jpg',name:'小米8青春吧'},
								{id:'33',img:'/imgs/item-box-4.jpg',name:'redMi K20pro'},],
								
								
							]
		      }
		    },
	}
</script>

<style lang="less">
	@import '../../assets/css/mixin.less';
	@import '../../assets/css/config.less';
	.swiper-box{
		.nav-menu{
			position: absolute;
			width: 264px;
			height: 451px;
			z-index: 9;
			text-align: left;
			padding: 26px 0;
			background-color: #55585a7a;
			box-sizing: border-box;
			.menu-wrap{
				position: relative;
				.menu-item{
					height: 50px;
					line-height: 50px;
					.children{
						display: none;
					}
					a{
						font-size: 16px;
						color: #fff;
						padding-left: 30px;
						&::after{
							content: '>';
							position: absolute;
			        right: 30px;
							color: #fff;
							font-size: 26px;
						}
					}
					&:hover{
						background-color: @colorA;
						.children{
							
							display: inline-block;
							position: absolute;
							background-color: #fff;
							width: 962px;
							left: 264px;
							height: 451px;
							top: -26px;
							ul{
								margin-top: 6.5px;
								display: flex;
								li{
									flex: 1;
									a{
										color: #333;
										text-align: center;
										span{
											display: inline-block;
											line-height: 50px;
											vertical-align: top;
										}
						       img{
										 height: 50px;
									 }
									}
								}
							}						
						}
					}
				}
			}
		}
		.swiper-container{
			height: 451px;
			width: 1226px;
			.swiper-button-prev{
				left: 274px;
			}
			a{
				width: 100%;
				height: 100%;
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
